
<template>
    <div>
        <el-button
            v-for="(item,index) in btnList"
            :key="index"
            @click="item.handleClick(data,item.param)"
            :class="item.class||'btn-site'"
            :disabled="item.disabled"
            :icon="item.icon"
        >{{item.label}}</el-button>
        <!-- 尝试这样写来解决偶发性的弹层不消失问题，无法复现bug,待验证 -->
        <el-dropdown
            v-if="isDrop"
            :hide-on-click="false"
        >
            <el-button class="btn-site">
                更多操作
                <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                    v-for="(item,index) in dropList"
                    :key="index"
                    :disabled="item.disabled"
                >
                    <div @click="item.handleClick(data,item.param)">{{item.label}}</div>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { filter, concat, sortBy } from "lodash";
import { isEmpty } from "@/utils/index";
/**
 *
 * 按钮组组件，可以根据传入关联数据动态控制具体按钮显示隐藏
 *
 * {Object<any>} data 关联数据
 *
 *
 * {Array<any>} btns 按钮组配置
 *
 *      isDrop: true, 是否在更多按钮组。如果更多按钮组只有一个按钮，那么直接在普通按钮组中显示
 *      sort:1, 排序值，默认为1
 *      label: "详情", 文本
 *      class: "btn-blue", 样式
 *      condition: ["permissionsData.info",{a:1},function(item){return true}], 校验条件
 *      param: "winInfo", 点击时传递的第二个参数
 *      handleClick: (this as any).onInfoClick 点击时触发方法，第一个参数为 data
 *
 */
import { mixinCondition } from "@/components/mixin/Condition";
@Component({
    name: "ZbBtnGroup",
    mixins: [mixinCondition]
})
export default class ZbBtnGroup extends Vue {
    // 是否必须检查权限
    @Prop({ default: true }) readonly isCheckPermissions!: Boolean;
    // 关联数据
    @Prop() readonly data!: Object;
    // 按钮组
    // isDrop: true, 是否在更多按钮组
    // sort:1, 排序值，默认为1
    // label: "详情", 文本
    // class: "btn-blue", 样式
    // condition: ["permissionsData.info"], 校验条件
    // param: "winInfo", 点击时传递的第二个参数
    // handleClick: (this as any).onInfoClick 点击时触发方法，第一个参数为 data
    @Prop() readonly btns!: Array<any>;
    // 关联数据与按钮组合
    get btnData() {
        return {
            data: this.data,
            btns: this.btns
        };
    }
    // 普通按钮组
    btnList: any = [];
    // 更多按钮组
    dropList: any = [];
    // 是否显示更多按钮组
    isDrop: boolean = false;
    @Watch("btnData", { immediate: true })
    updateBtnData({ btns, data }: any) {
        // 关联数据和按钮组必须都存在
        if (!isEmpty(btns)) {
            const me = this as any;
            // 如果需要检查权限
            if (me.isCheckPermissions) {
                if (!isEmpty(data)) {
                    // 过滤掉不满足条件的按钮组
                    btns = filter(btns, (item) => {
                        return me.checkCondition(item, data);
                    });
                } else {
                    btns = [];
                }
            }
            // 获取普通按钮组
            let btnList = filter(btns, (item) => {
                return !item.isDrop;
            });
            // 获取更多按钮组
            const dropList = filter(btns, (item) => {
                return item.isDrop;
            });
            // 标识是否显示更多按钮组
            let isDrop = !isEmpty(dropList);
            if (isDrop && dropList.length == 1) {
                // 如果更多按钮组只有一个按钮，那么直接在普通按钮组中显示
                btnList = concat(btnList, dropList);
                // 标识不显示更多按钮组
                isDrop = false;
            } else {
                // 设置更多按钮组数据
                me.dropList = dropList;
            }
            // 遍历普通按钮组，设置默认排序值
            btnList.forEach((item) => {
                if (isEmpty(item.sort)) {
                    item.sort = 1;
                }
            });
            // 根据排序值重新排序
            btnList = sortBy(btnList, "sort");
            // 设置是否显示更多按钮组
            me.isDrop = isDrop;
            // 设置普通按钮组数据
            me.btnList = btnList;
        }
    }
}
</script>
<style scoped lang="scss">
/deep/.el-dropdown {
    margin-left: 7px;
}
</style>